<template>
	<div class="mask" v-show="dialogVisible">
		<i class="el-icon-circle-close" @click="closeMask"></i>
		<el-carousel height="400px" type="card" :initialIndex.sync="initialIndex" :autoplay="false">
		  <el-carousel-item  v-for="(item,index) in fileList" :key="index">
			<el-image
			      style="width: 100%; height: 400px"
			      :src="item"
			      fit="contain" ></el-image>
		  </el-carousel-item>
		</el-carousel>
	</div>
	
	
</template>

<script>
	export default {
		data(){
			return{
				index:0,
			}
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default: false
			},
			initialIndex: {
				type: Number,
				default: 0
			},
			fileList: {
				type: Array,
				default: []
			},
		},
		watch:{
			dialogVisible(val) {
				console.log('v',val)
			},
			initialIndex(val){
				
			}
		},
		methods: {
			closeMask(){
				this.$emit('update:dialogVisible',false)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.mask{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:rgba(0,0,0,.8);
		z-index:9999;
		i{
			font-size:40px;
			position:absolute;
			top:40px;
			right:40px;
			color:#fff;
		}
		.el-carousel{
			position:absolute;
			top:50%;
			width:94%;
			padding:0 2%;
			margin-top:-200px;
		}
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		margin: 0;
	}
	
	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
